/**
 * Created by Weizehua on 2017/1/25.
 */
import {Component, OnInit, Input, ViewChild, OnChanges, SimpleChange} from "@angular/core";
import {PostCardRequest} from "./PostCardRequest";
import {Card, Img, Label} from "ionic-angular";
declare let flwebgl: any;
declare let window: any;

interface Spot {
    title: string,
    detail: string,
    x: number,
    y: number,
}

@Component({
    selector: 'post',
    templateUrl: 'PostCard.html',
    providers: [PostCardRequest],
})
export class PostCard implements OnInit, OnChanges {
    @ViewChild(Card)
    card: Card;
    @ViewChild(Img)
    image: Img;
    @ViewChild(Label)
    label: Label;

    native: HTMLElement;
    nativeImage: HTMLImageElement;

    @Input()
    source = "";
    @Input()
    spots: Spot[] = [];

    unit: number;

    thumbsUp = false;

    constructor(public postCardRequest: PostCardRequest) {
        this.spots.push({title: '123', detail: 'xxxxyyy', x:0, y:0});
        this.spots.push({title: '123', detail: 'xxxxyyy', x:0.1, y:0.1});
    }

    async ngOnInit() {
    }

    ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
        this.native = this.card.getNativeElement();
        this.nativeImage = this.native.querySelector('img');
        this.unit = this.nativeImage.clientWidth;
    }

    async onImageClicked(event: MouseEvent) {
        if (!this.thumbsUp)
            return;
        this.thumbsUp = false;
        let ratio = (this.unit / this.nativeImage.clientWidth);
        let x = event.offsetX / this.nativeImage.clientWidth * ratio;
        let y = event.offsetY / this.nativeImage.clientWidth * ratio;
        this.spots.push({title:'123', detail: 'xxyyxxy', x:x, y:y})
    }

    async onThumbsUpClicked() {
        this.thumbsUp = !this.thumbsUp;
    }
}
